<template>
    <section class="order-list-main base-main">
      <van-tabs v-model="active" animated>
        <van-tab title="全部">
          <div class="order-tab-box">
            <Order
              :orderData="orderData"
              @send-order-id="getOrderOId"
              @operation-order="operationOrder"
            ></Order>
          </div>
        </van-tab>
        <van-tab title="待付款">
          <div class="order-tab-box">
            <Order
              :orderData="orderData"
              @send-order-id="getOrderOId"
              @operation-order="operationOrder"
            ></Order>
          </div>
        </van-tab>
        <van-tab title="待发货">
          <div class="order-tab-box">
            <Order
              unpaid="unpaid"
              :orderData="orderData"
              @send-order-id="getOrderOId"
              @operation-order="operationOrder"
              @opreation-refund="operationRefund"
            ></Order>
          </div>
        </van-tab>
        <van-tab title="待收货">
          <div class="order-tab-box">
            <Order
              afterSale="afterSale"
              :orderData="orderData"
              @send-order-id="getOrderOId"
              @operation-order="operationOrder"
              @opreation-after-sale="operationAfterSale"
            ></Order>
          </div>
        </van-tab>
        <van-tab title="待评价">
          <div class="order-tab-box">
            <Order
              :orderData="orderData"
              @send-order-id="getOrderOId"
            ></Order>
          </div>
        </van-tab>
      </van-tabs>
    </section>
</template>

<script type="text/ecmascript-6">
  import Order from '../../components/Order.vue'

  export default {
    components:{
      Order
    },
    data() {
      return {
        active:this.$route.params.active || 0,
        orderData:[
          {
            orderNum:'20183546543112',
            status:1,//待付款
            goodList:[
              {
                goodName:'商品名称11',
                goodModel:'商品规格11',
                price:'80.00',
                goodNum:2,
                imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
              },
              {
                goodName:'商品名称22',
                goodModel:'商品规格22',
                price:'80.00',
                goodNum:2,
                imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
              },
            ],
            totalPrice:320,
            totalGoodNum:4,
          },
          {
            orderNum:'20183546543112',
            status:2,//待付款
            goodList:[
              {
                goodName:'商品名称11',
                goodModel:'商品规格11',
                price:'80.00',
                goodNum:2,
                imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
              },
              {
                goodName:'商品名称22',
                goodModel:'商品规格22',
                price:'80.00',
                goodNum:2,
                imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
              },
            ],
            totalPrice:320,
            totalGoodNum:4,
          }
        ],
      }
    },
    created(){

    },
    methods: {
      //跳转到订单详情页
      getOrderOId(obj){
        this.$router.push({
          path:'/index/web/orderDetail',
          query:{id:obj.id,afterSale:obj.afterSale,unpaid:obj.unpaid}
        })
      },
      //操作订单
      operationOrder(obj){
        switch (obj.type){
          case 1:
            this.$dialog.confirm({
              title: '',
              message: '确认取消订单？'
            }).then(() => {
              console.log('确认取消订单');
              // on confirm
            }).catch(() => {
              // on cancel
            });
            break;
          case 2:
            console.log('去付款');
            break;
          case 3:
            this.$router.push({
              path:'/index/web/logisticsDetail',
              query:{id:obj.id}
            });
            break;
          case 4:
            this.$dialog.confirm({
              title: '',
              message: '确认收到货物？'
            }).then(() => {
              console.log('确认收到货物');
              // on confirm
            }).catch(() => {
              // on cancel
            });
            break;
          case 5:
            this.$dialog.confirm({
              title: '',
              message: '确认删除订单？'
            }).then(() => {
              console.log('确认删除订单');
              // on confirm
            }).catch(() => {
              // on cancel
            });
            break;
        }
      },
      //退款
      operationRefund(id){
        this.$router.push({
          path:'/index/web/refund',
          query:{id:id}
        })
      },
      //售后
      operationAfterSale(id){
        this.$router.push({
          path:'/index/web/afterType',
          query:{id:id}
        })
      },
    },
  }
</script>

<style lang="scss">
  @import '../../assets/css/orderList';
</style>
